<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>产品功能</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/><!--公用-->
		<link rel="stylesheet" type="text/css" href="css/gongneng.css"/>
		<link rel="stylesheet" href="css/swiper-4.2.2.min.css">
		<link rel="stylesheet" href="css/animate.css">
	</head>
	<body>
		<div class="web">
			
			<!--头部-->
			<div class="top">
				<div class="topbox">
					<div class="logo">
						<img src="img/logo.jpg"/>
					</div>
					
					<!--导航-->
					<div class="nav">
						<span><a href="index.html">首页</a></span>
						<span class="active"><a href="chanpingongneng.html">产品功能</a></span>
						<span><a href="zifei.html">产品资费</a></span>
						<span><a href="About.html">关于我们</a></span>
						<span class="login btn"><a href="#">用户登录</a></span>
						<span class="enrol btn"><a href="zhuce.html">企业注册</a></span>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			
			<!--隐藏的头部-->
			<div class="yincang">
				<div>
					<p class="jia"><img src="img/列表.png"/></p>
					<div class="caidan">
						<p class="active"><a href="index.html">首页</a></p>
						<p><a href="chanpingongneng.html">产品功能</a></p>
						<p><a href="zifei.html">产品资费</a></p>
						<p><a href="About.html">关于我们</a></p>
						<p class="login btn"><a href="#">用户登录</a></p>
						<p class="enrol btn"><a href="#">企业注册</a></p>
					</div>
				</div>
				<div>
					<p><img src="img/logo.jpg"/></p>
				</div>
			</div>
			
			<!--banner-->
			<div class="banner">
				<!--<div class="bannerbox">-->
					<h2 class="wow fadeInDown">产品功能简介</h2>
					<div class="wow fadeInDown">为HR提供员工管理、招聘流程、薪酬核算、风险监控等提高工作效率的解决办法</div>
					<div>
						<a href="#" class="wow bounceInLeft">
							<span><img src="img/jieshao.jpg"/></span>
							<span>产品介绍</span>
						</a>
						<a href="#" class="wow bounceInRight">
							<span><img src="img/开始.png"/></span>
							<span>操作演示</span>
						</a>
					</div>
				<!--</div>-->
			</div>
			
			<!--选择切换轮播图-->
			<div class="bankuai">
				<h2>八大核心板块</h2>
				<ul>
					<li>
						<div class="ac pic"><img class="wow rotateIn" src="img/yuangong.png"/></div>
						<div>员工管理</div>
						<div>Staff management</div>
					</li>
					<li>
						<div class="pic"><img class="wow rotateIn" src="img/jiaqin.png"/></div>
						<div>假勤管理</div>
						<div>Holiday</div>
					</li>
					<li>
						<div class="pic"><img class="wow rotateIn" src="img/xingzheng.png"/></div>
						<div>行政管理</div>
						<div>Administration</div>
					</li>
					<li>
						<div class="pic"><img class="wow rotateIn" src="img/xinchou.png"/></div>
						<div>薪酬管理</div>
						<div>Remuneration</div>
					</li>
					<li>
						<div class="pic"><img class="wow rotateIn" src="img/shenpi.png"/></div>
						<div>审批管理</div>
						<div>Approval</div>
					</li>
					<li>
						<div class="pic"><img class="wow rotateIn" src="img/zhanghao.png"/></div>
						<div>账号管理</div>
						<div>Account Number</div>
					</li>
					<li>
						<div class="pic"><img class="wow rotateIn" src="img/cem.png"/></div>
						<div>CRM管理</div>
						<div>CRM Management</div>
					</li>
					<li>
						<div class="pic"><img class="wow rotateIn" src="img/oa.png"/></div>
						<div>OA管理</div>
						<div>OA Management</div>
					</li>
				</ul>
			</div>
			
			<div class="dis div">
				<div class="title">
					<h2>员工管理</h2>
					<div>员工档案批量导入，自动生成组织架构  |    员工APP、系统在线完善个人信息  |  展示员工在职、离职、试用期和待离职</div>
				</div>
				<div class="gongneng_pic"><img src="img/01.png"/></div>
				<!--<div class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><img src="img/bigpic_06.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner05.png"/></div>
				        <div class="swiper-slide"><img src="img/banner03.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner04.jpg"/></div>
				    </div>-->
				    <!-- 如果需要分页器 -->
				    <!--<div class="swiper-pagination swiper-button swiper-pagination-clickable swiper-pagination-bullets"></div>-->
				    
				    <!-- 如果需要导航按钮 -->
				    <!--<div class="swiper-button-prev"></div>
				    <div class="swiper-button-next"></div>-->
				    
				    
				    <!-- 如果需要滚动条 -->
				    <!--<div class="swiper-scrollbar"></div>-->
				<!--</div>-->
			</div>
			<div class="div">
				<div class="title">
					<h2>假勤管理</h2>
					<div>考勤记录永不缺漏  |    支持多班次管理、排班  |  灵活排班，可多人成组进行排班</div>
				</div>
				<div class="gongneng_pic"><img src="img/02.png"/></div>
				
				<!--<div class="swiper-container t">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><img src="img/bigpic_06.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner05.png"/></div>
				        <div class="swiper-slide"><img src="img/banner03.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner04.jpg"/></div>
				    </div>-->
				    <!-- 如果需要分页器 -->
				    <!--<div class="swiper-pagination swiper-button swiper-pagination-clickable swiper-pagination-bullets"></div>-->
				    
				    <!-- 如果需要导航按钮 -->
				    <!--<div class="swiper-button-prev"></div>
				    <div class="swiper-button-next"></div>-->
				    
				    <!-- 如果需要滚动条 -->
				    <!--<div class="swiper-scrollbar"></div>-->
				<!--</div>-->
			</div>
			<div class="div">
				<div class="title">
					<h2>行政管理</h2>
					<div>准确记录资产的每个明细  |    可用于管理企业内部的WMS功能  |  及时提醒计审、年审等重要事件</div>
				</div>
				<div class="gongneng_pic"><img src="img/03.png"/></div>
				
				<!--<div class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><img src="img/bigpic_06.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner05.png"/></div>
				        <div class="swiper-slide"><img src="img/banner03.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner04.jpg"/></div>
				    </div>-->
				    <!-- 如果需要分页器 -->
				    <!--<div class="swiper-pagination swiper-button swiper-pagination-clickable swiper-pagination-bullets"></div>-->
				    
				    <!-- 如果需要导航按钮 -->
				    <!--<div class="swiper-button-prev"></div>
				    <div class="swiper-button-next"></div>-->
				    
				    <!-- 如果需要滚动条 -->
				    <!--<div class="swiper-scrollbar"></div>-->
				<!--</div>-->
			</div>
			<div class="div">
				<div class="title">
					<h2>薪酬管理</h2>
					<div>支持白领的日薪方式计薪  |    也可用于物流行业的蓝领计薪  |  灵活组合的计薪方式，适用于多种场景</div>
				</div>
				<div class="gongneng_pic"><img src="img/04.png"/></div>
				
				<!--<div class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><img src="img/bigpic_06.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner05.png"/></div>
				        <div class="swiper-slide"><img src="img/banner03.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner04.jpg"/></div>
				    </div>-->
				    <!-- 如果需要分页器 -->
				    <!--<div class="swiper-pagination swiper-button swiper-pagination-clickable swiper-pagination-bullets"></div>-->
				    
				    <!-- 如果需要导航按钮 -->
				    <!--<div class="swiper-button-prev"></div>
				    <div class="swiper-button-next"></div>-->
				    
				    <!-- 如果需要滚动条 -->
				    <!--<div class="swiper-scrollbar"></div>-->
				<!--</div>-->
			</div>
			<div class="div">
				<div class="title">
					<h2>审批管理</h2>
					<div>支持加班、假勤、通用、借贷等多种审批流程  |    实现实时审批提醒，多个审批节点</div>
				</div>
				<div class="gongneng_pic"><img src="img/05.png"/></div>
				
				<!--<div class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><img src="img/bigpic_06.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner05.png"/></div>
				        <div class="swiper-slide"><img src="img/banner03.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner04.jpg"/></div>
				    </div>-->
				    <!-- 如果需要分页器 -->
				    <!--<div class="swiper-pagination swiper-button swiper-pagination-clickable swiper-pagination-bullets"></div>-->
				    
				    <!-- 如果需要导航按钮 -->
				    <!--<div class="swiper-button-prev"></div>
				    <div class="swiper-button-next"></div>-->
				    
				    <!-- 如果需要滚动条 -->
				    <!--<div class="swiper-scrollbar"></div>-->
				<!--</div>-->
			</div>
			<div class="div">
				<div class="title">
					<h2>账号管理</h2>
					<div>普通用户账号管理  |    用户权限管理  |  部门分级以及项目制管理</div>
				</div>
				<div class="gongneng_pic"><img src="img/06.png"/></div>
				
				<!--<div class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><img src="img/bigpic_06.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner05.png"/></div>
				        <div class="swiper-slide"><img src="img/banner03.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner04.jpg"/></div>
				    </div>-->
				    <!-- 如果需要分页器 -->
				    <!--<div class="swiper-pagination swiper-button swiper-pagination-clickable swiper-pagination-bullets"></div>-->
				    
				    <!-- 如果需要导航按钮 -->
				    <!--<div class="swiper-button-prev"></div>
				    <div class="swiper-button-next"></div>-->
				    
				    <!-- 如果需要滚动条 -->
				    <!--<div class="swiper-scrollbar"></div>-->
				<!--</div>-->
			</div>
			<div class="div">
				<div class="title">
					<h2>CRM管理</h2>
					<div>企业信息管理  |    跟进的业务员跟进进度管理  |  内部客户提成规则管理</div>
				</div>
				<div class="gongneng_pic"><img src="img/07.png"/></div>
				
				<!--<div class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><img src="img/bigpic_06.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner05.png"/></div>
				        <div class="swiper-slide"><img src="img/banner03.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner04.jpg"/></div>
				    </div>-->
				    <!-- 如果需要分页器 -->
				    <!--<div class="swiper-pagination swiper-button swiper-pagination-clickable swiper-pagination-bullets"></div>-->
				    
				    <!-- 如果需要导航按钮 -->
				    <!--<div class="swiper-button-prev"></div>
				    <div class="swiper-button-next"></div>-->
				    
				    <!-- 如果需要滚动条 -->
				    <!--<div class="swiper-scrollbar"></div>-->
				<!--</div>-->
			</div>
			<div class="div">
				<div class="title">
					<h2>OA管理</h2>
					<div>企业内部公告发布  |    员工贴心功能消息提醒  |  审批消息发布管理</div>
				</div>
				<div class="gongneng_pic"><img src="img/08.png"/></div>
				
				<!--<div class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide"><img src="img/bigpic_06.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner05.png"/></div>
				        <div class="swiper-slide"><img src="img/banner03.jpg"/></div>
				        <div class="swiper-slide"><img src="img/banner04.jpg"/></div>
				    </div>-->
				    <!-- 如果需要分页器 -->
				    <!--<div class="swiper-pagination swiper-button swiper-pagination-clickable swiper-pagination-bullets"></div>-->
				    
				    <!-- 如果需要导航按钮 -->
				    <!--<div class="swiper-button-prev"></div>
				    <div class="swiper-button-next"></div>-->
				    
				    <!-- 如果需要滚动条 -->
				    <!--<div class="swiper-scrollbar"></div>-->
				<!--</div>-->
			</div>
			
			<!--bottom-->
			<div class="bottom">
				<div>联系方式：13710415266</div>
				<div>联系地址：广州市白云区机场北路88号</div>
				<div>Copyright © 2016. 深圳优领信息科技有限公司 All rights reserved.</div>
			</div>
			
			<!--返回顶部-->
			<div class="return" onClick="gotoTop();return false;">
				<img src="img/jiantou_09.jpg"/>
			</div>
		</div>
		
		<script type="text/javascript">
//			头部
			window.onscroll = function(){ 
			     var t = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
			     var top = document.querySelector( ".top" ); 
			     var uptop = document.querySelector( ".return" ); 
			     if( t > 0 ) { 
			        top.classList.add("Creative");
			     } else { //如果距离顶部小于300px
			        top.classList.remove("Creative");
			     } 
			     
			     if( t == 0 ) { 
			        uptop.style.display="none"
			     } else { 
			        uptop.style.display="block"
			     } 
			} 
			
//			选项卡
			function xuanxiang(){
				var lis = document.querySelectorAll(".bankuai >ul li");
				var div = document.querySelectorAll(".div");
				var back = document.querySelectorAll(".bankuai >ul li div:nth-child(1)");
				for(let i=0;i<lis.length;i++){
					lis[i].addEventListener("click",function(){
						for(var j=0;j<lis.length;j++){
							div[j].classList.remove("dis");
							back[j].classList.remove("ac");
						}
						div[i].classList.add("dis");
						back[i].classList.add("ac");
					})
				}
			}
			xuanxiang()
			
//			返回顶部
			function gotoTop(acceleration,stime) {
			    acceleration = acceleration || 0.1;
			    stime = stime || 10;
			    var x1 = 0;
			    var y1 = 0;
			    var x2 = 0;
			    var y2 = 0;
			    var x3 = 0;
			    var y3 = 0; 
			    if (document.documentElement) {
			        x1 = document.documentElement.scrollLeft || 0;
			        y1 = document.documentElement.scrollTop || 0;
			    }
			    if (document.body) {
			        x2 = document.body.scrollLeft || 0;
			        y2 = document.body.scrollTop || 0;
			    }
			    var x3 = window.scrollX || 0;
			    var y3 = window.scrollY || 0;
			 
			    // 滚动条到页面顶部的水平距离
			    var x = Math.max(x1, Math.max(x2, x3));
			    // 滚动条到页面顶部的垂直距离
			    var y = Math.max(y1, Math.max(y2, y3));
			 
			    // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
			    var speeding = 1 + acceleration;
			    window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
			 	
			    // 如果距离不为零, 继续调用函数
			    if(x > 0 || y > 0) {
			        var run = "gotoTop(" + acceleration + ", " + stime + ")";
			        window.setTimeout(run, stime);
			    }
			    
			}
			
			//			移动端头部
			function caidan(){
				var p = document.querySelector(".jia");
				var div = document.querySelector(".caidan");
				p.addEventListener("click",function(){
					if(div.style.display=="block"){
						div.style.display="none"
					}else{
						div.style.display="block"
					}
				})
				
			}
			caidan()
		</script>
		
		<!--轮播图-->
		<script src="js/swiper-4.2.2.min.js"></script>
		<script>        
	    	var mySwiper = new Swiper ('.swiper-container', {
//	    	direction: 'vertical',
			autoplayDisableOnInteraction : false,
	    	loop: true,
	    	autoplay:true,
	    	observer:true,//修改swiper自己或子元素时，自动初始化swiper  
			observeParents:true,

			// 如果需要分页器
		    pagination: {
		      el: '.swiper-pagination',
		      clickable :true,
		    },
		    
		    // 如果需要前进后退按钮
		    navigation: {
		      nextEl: '.swiper-button-next',
		      prevEl: '.swiper-button-prev',
		    },
		    
		    // 如果需要滚动条
		    scrollbar: {
		      el: '.swiper-scrollbar',
		    },
		  })        
		  
		  
	    </script>
	    
	    <!--动画-->
	    <script src="js/wow.js"></script>
		<script type="text/javascript">
			var w = new WOW();
			w.init()
		</script>
	</body>
</html>
